<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center platformMessage_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub platformMessage_fd0_0'>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0' @tap.stop="isBack">
					<text class='fu-iconfont2  platformMessage_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='platformMessage_fd0_0_c1_c0'>闯关</text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'></view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>

		<view class="loading_css" v-if="isShow">
			<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
			<view>加载中</view>
		</view>

		<view class="flex flex-direction align-stretch benben-flex-layout platformMessage_flex_1" v-else>
			<view class="word" v-for="(item, index) in list" :key="index">
				<view class="word_item">
					<text v-for="(v, k) in item" @tap.stop="clickWord(index, k)">
						<template v-if="v.color == 1">
							<text class="word_item_text" v-if="v.is_smear == 0">{{v.word}}</text>
							<text class="word_hide" v-if="v.is_smear == 1">{{v.word}}</text>
						</template>
						<template v-if="v.color == 2">
							<text class="word_learned">{{v.word}}</text>
						</template>
						<template v-if="v.color == 3">
							<text class="word_err">{{v.word}}</text>
						</template>

					</text>

				</view>
			</view>

			<view class="topic_info" v-if="is_question">
				<view class="topic_title">
					<image :src='STATIC_URL+"106.png"' mode=""></image>
					<view class="topic_type" v-if="question_info.question_type == 1">单选</view>
					<view class="topic_type" v-if="question_info.question_type == 2">多选</view>
					<view class="topic_type" v-if="question_info.question_type == 3">判断</view>
					<view class="title_text">{{question_info.title}}</view>
				</view>
				<view class="topic_list">
					<view class="topic_item" v-for="(v, k) in question_info.options" :key="k"
						@tap.stop="selectOption(question_info.question_type, k)">
						<image v-if="v.is_select" :src='STATIC_URL+"10.png"' mode=""></image>
						<image v-else :src='STATIC_URL+"11.png"' mode=""></image>
						<view class="topic_item_text">{{v.options_title}}</view>
					</view>
				</view>
				<view class="topic_sub" @tap.stop="selectAnswer">提交答案</view>
			</view>

		</view>

		<view class="submit_btn">
			<view class="btn_text" @tap.stop="getSubmit">提交</view>
		</view>

		<view style="height: 110rpx;"></view>
		<uv-modal width="300rpx" :showCancelButton="true" :closeOnClickOverlay="false" confirmColor="#4087FD"
			ref="modal" title="提示" :content='content' align="center" @confirm="confirm"
			:textStyle="{fontSize: 20 + 'px'}"></uv-modal>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},


		data() {
			return {
				"content": "当前闯关暂未完成，确认退出吗？",
				"aid": "",
				"isShow": true,
				"letter": ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'], // 选项ABC
				"list": [],
				"is_question": false,
				"one_index": "",
				"two_index": "",
				"question_info": {
					"options": []
				}, // 题目列表
				"problem_info": [], // 答案列表
				"option_index": "-1",
				"topic_type": "", // 题目类型
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				aid
			} = options;
			if (aid !== undefined) this.aid = aid;
			this.getDetails();

			uni.$on('getContent', res => {
				this.getDetails();
			});
		},
		onUnload() {
			uni.$off('getContent');
		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取详情  post6573d56016d46
			getDetails() {
				this.$api.post(global.apiUrls.post6573d56016d46, {
					aid: this.aid
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.list = res.data.data.total_arr;
						if (this.list.length > 0) {
							this.list.forEach((v, k) => {
								if (v.length > 0) {
									v.forEach((v1, k1) => {
										if (v1.is_smear == 1) {
											this.problem_info.push({
												problem_id: v1.question_info.aid,
												answer: ""
											})
										}
									})
								}
							})
						}
					} else {
						this.$message.info(res.data.msg);
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					}
				})
			},
			// 滚动到页面底部
			scrollBottom() {
				let pageHeight = uni.getSystemInfoSync().windowHeight; // 或者通过其他方式获取页面高度
				console.log(pageHeight);
				// 设置目标位置为页面底部
				uni.pageScrollTo({
					duration: 200, // 过渡时间
					scrollTop: pageHeight+100, // 滚动的实际距离
				})
			},

			clickWord(one_index, two_index) {
				this.one_index = one_index;
				this.two_index = two_index;
				if ((this.list[this.one_index])[this.two_index].is_smear == 1 && (this.list[this.one_index])[this
						.two_index].color == 1) {
					this.is_question = true;
					this.question_info = (this.list[this.one_index])[this.two_index].question_info;
					// console.log(this.question_info);
					if (this.question_info.options.length > 0) {
						this.question_info.options.forEach((v, k) => {
							v.is_select = false;
						})
					}
					this.scrollBottom();
				} else {
					return;
				}

			},
			// 单选题
			selectOption(topic_type, option_index) {
				// topic_type 1单选  3判断  2多选
				this.topic_type = topic_type;
				this.option_index = option_index;


				if (topic_type == 1 || topic_type == 3) {
					this.question_info.options.forEach((v, k) => {
						v.is_select = false;
					})
					this.question_info.options[option_index].is_select = true;

				} else {
					this.question_info.options[option_index].is_select = !this.question_info.options[option_index]
						.is_select;
				}
				this.$forceUpdate();

			},
			// 选择答案
			selectAnswer() {
				if (this.option_index == -1) {
					this.$message.info('请选择答案');
					return;
				}
				if (this.topic_type == 1 || this.topic_type == 3) {
					this.problem_info.forEach((v, k) => {
						if (this.question_info.aid == v.problem_id) {
							v.answer = this.question_info.options[this.option_index].options_id;
						}
					})
					if (this.question_info.options[this.option_index].options_id == this.question_info.answer) {
						this.list[this.one_index][this.two_index].color = 2;

					} else {
						this.list[this.one_index][this.two_index].color = 3;
					}

				} else {
					// 多选
					let option_id = '';
					let option_name = '';
					this.question_info.options.forEach((v, k) => {
						if (v.is_select) {
							option_id += v.options_id + ',';
						}
					})
					option_id = option_id.substring(0, option_id.length - 1);
					if (option_id == this.question_info.answer) {
						this.problem_info.forEach((v, k) => {
							if (this.question_info.aid == v.problem_id) {
								v.answer = this.question_info.options[this.option_index].options_id;
							}
						})
						this.list[this.one_index][this.two_index].color = 2;


					} else {
						this.problem_info.forEach((v, k) => {
							if (this.question_info.aid == v.problem_id) {
								v.answer = this.question_info.options[this.option_index].options_id;
							}
						})
						this.list[this.one_index][this.two_index].color = 3;
					}
				}
				this.is_question = false;
				this.option_index = -1;
				this.$forceUpdate();
			},
			// 闯关提交
			getSubmit() {
				if (this.problem_info.length > 0) {
					let num = 0;
					num = this.problem_info.filter(u => u.answer == "").length;
					if (num != 0) {
						this.$message.info('请完成闯关');
						return;
					}
				} else {
					return;
				}

				this.$api.post(global.apiUrls.post65742af193218, {
					record_id: this.aid,
					problem_info: JSON.stringify(this.problem_info)
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1 || res.data.code == 3) {
						let type = 1; //  1成功  2失败
						if (res.data.code == 1) {
							type = 1;
						} else if (res.data.code == 3) {
							type = 2;
							uni.setStorageSync('paragraph', res.data.data.paragraph);
						}
						this.$message.info(res.data.msg);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/breakBarrier/challengeResult?type=' + type +
									'&time=' + res.data.data.time + '&go_page=' + res.data.data
									.go_page
							})
						}, 800)
					} else if (res.data.code == 2) {
						this.$message.info(res.data.msg);
						this.isShow = true;
						this.getDetails();
					}
				})

			},
			isBack() {
				this.$refs.modal.open();
			},
			confirm() {
				this.$refs.modal.close();
				uni.navigateBack();
			},
		}
	};
</script>
<style lang="scss" scoped>
	.topic_info {
		margin: 15rpx 25rpx 0;
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx 25rpx;
		min-height: 640rpx;

		.topic_title {
			display: flex;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.title_text {
				width: calc(100% - 100rpx);
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;
			}

			.topic_type {
				background: #4087FD;
				color: #fff;
				border-radius: 4rpx;
				font-size: 16rpx;
				padding: 0rpx 5rpx;
				line-height: 30rpx;
				margin-right: 10rpx;
			}
		}

		.topic_list {
			padding: 14rpx 0;

			.topic_item {
				padding: 14rpx 0 14rpx 40rpx;
				display: flex;
				align-items: center;

				image {
					width: 23rpx;
					height: 23rpx;
					margin: 0 15rpx 0 0;
				}

				.topic_item_text {
					width: calc(100% - 38rpx);
					font-size: 18rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 25px;
				}
			}
		}

		.topic_sub {
			background: #4087FD;
			color: #fff;
			border-radius: 24rpx;
			width: 170rpx;
			height: 45rpx;
			font-size: 20rpx;
			line-height: 45rpx;
			text-align: center;
			margin: 24rpx auto 0;
		}
	}

	.submit_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 25rpx 35rpx;

		.btn_text {
			background: #4087FD;
			width: 100%;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			color: #fff;
			font-size: 25rpx;
			font-weight: 500;
			border-radius: 34rpx;
		}
	}

	.word {
		margin: 15rpx 25rpx 0;
		background: #fff;
		border-radius: 10rpx;
		padding: 13rpx 20rpx;

		.word_item {
			padding: 13rpx 0;
			line-height: 30rpx;
			overflow: hidden;
			word-break: keep-all;

			.word_item_text {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
			}

			.word_learned {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
				color: #4DC777;
			}

			.word_err {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
				color: #FA3B3D;
			}

			.word_hide {
				float: left;
				// width: 110rpx;
				// height: 35rpx;
				padding: 5rpx 10rpx;
				background: #F0F6FF;
				color: #F0F6FF;
				// background: indianred;
				border-radius: 5rpx;
			}
		}
	}

	.intensify {
		margin: 15rpx 0 0;
		background: #fff;
		border-radius: 10rpx;

		.intensify_title {
			padding: 20rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;

			.title_content {
				width: 100%;
				font-size: 20rpx;
				font-weight: 500;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 1;
			}

		}

	}

	.content_img {
		width: 100%;
		height: 219rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.platformMessage_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.platformMessage_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}

	.platformMessage_fd0_0_c0_c0 {
		font-size: 25rpx;
		color: #333;
	}

	.platformMessage_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.platformMessage_fd0_0 {
		padding: 0rpx 25rpx 0rpx 25rpx;
	}

	.platformMessage_flex_1 {
		// margin: 16rpx 25rpx 16rpx 25rpx;
		// background: #fff;
		// border-radius: 10rpx;
		// padding: 0 25rpx;
	}

	.platformMessage_fd1_0_c2 {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 25rpx;
	}

	.platformMessage_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0_c0 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		// line-height: 45rpx;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0 {
		// background: #fff;
		width: 100%;
		padding: 20rpx 25rpx 20rpx 25rpx;
		border-bottom: 1px solid #eee;
	}
</style>